<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 300px;
            height: 300px;
            border: 1px solid #ddd;
            /* background-color: rgb(158, 114, 114); */
            background-image: url('./images/cart.jpg');
            /* 
                repeat-x --- 水平方向平铺
                repeat-y --- 垂直方向平铺
            */
            background-repeat: no-repeat;
            background-size: 100px 100px;
            /* background-size: 100% 100%; */
        }

        .div2 {
            width: 112px;
            height: 180px;
            border: 1px solid #aaa;
            background-image: url('./images/jl.png');
            background-repeat: no-repeat;
            /* 
                x: 正数---图片往右边移动
                   负数---图片往左移动
                y: 正数---图片往下边移动
                   负数---图片往上移动
            */
            background-position: 0 10px;
        }
    </style>
</head>
<body>
    <!-- 
        背景颜色
        background-color
        背景图片
        background-image
        背景平铺
        background-repeat
        背景尺寸
        background-size
        背景定位
        background-position
     -->

     <div class="div1"></div>
     <div class="div2"></div>
</body>
</html>